<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      status-icon
    >
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="手机号:" prop="phone">
            <el-input v-model="ruleForm.phone" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="角色:">
            <vxe-radio v-model="roleRadio" label="0" content="普通用户" disabled />
            <vxe-radio v-model="roleRadio" label="1" content="管理员" disabled />
            <vxe-radio v-model="roleRadio" label="2" content="超级管理员" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="Q1:" prop="securityQ1">
            <el-select v-model="ruleForm.securityQ1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="A1:" prop="securityA1">
            <el-input v-model="ruleForm.securityA1" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="Q2:" prop="securityQ2">
            <el-select v-model="ruleForm.securityQ2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="A2:" prop="securityA2">
            <el-input v-model="ruleForm.securityA2" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="Q3:" prop="securityQ3">
            <el-select v-model="ruleForm.securityQ3" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="A3:" prop="securityA3">
            <el-input v-model="ruleForm.securityA3" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;" justify="end">
        <el-col :span="10">
          <el-form-item>
            <span class="dialog-footer">
              <el-button @click="resetRuleForm(ruleFormRef)">重 置</el-button>
              <el-button type="success" @click="ensureUpdate(ruleFormRef)">确 定</el-button>
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ref, reactive, onMounted, inject } from "vue";
import { options1, options2, options3 } from '@/views/User/Register/options'
// utils
import { checkPhone } from "@/utils/util";
// api
import editUserApi from "@/request/api/user";
// store
import useLoginStore from "@/store/login";
import { showMessageBox } from "@/utils/alertMsg";

const loginStore = useLoginStore();
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  }
});

// 刷新子路由
const reload: Function = inject('reload');

interface RuleForm {
  userid: number;
  username: string;
  phone: string;
  securityQ1: string;
  securityA1: string;
  securityQ2: string;
  securityA2: string;
  securityQ3: string;
  securityA3: string;
  mark: string
}

const ruleFormRef = ref<FormInstance>();

const roleRadio = ref<string>('0');
const ruleForm = reactive<RuleForm>({
  userid: 0,
  username: '',
  phone: '',
  securityQ1: '',
  securityA1: '',
  securityQ2: '',
  securityA2: '',
  securityQ3: '',
  securityA3: '',
  mark: 'personalInfo'
});

// 初始值
const init = () => {
  if(props.userInfo) {
    ruleForm.userid = props.userInfo.userid;
    ruleForm.username = props.userInfo.username;
    ruleForm.phone = props.userInfo.phone;
    roleRadio.value = String(props.userInfo.ismanager);
    ruleForm.securityQ1 = props.userInfo.securityQ1;
    ruleForm.securityA1 = props.userInfo.securityA1;
    ruleForm.securityQ2 = props.userInfo.securityQ2;
    ruleForm.securityA2 = props.userInfo.securityA2;
    ruleForm.securityQ3 = props.userInfo.securityQ3;
    ruleForm.securityA3 = props.userInfo.securityA3;
  }
}

onMounted(() => {
  init()
})

const validPhone = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入您的手机号"));
  } else if (!checkPhone(value)) {
    callback(new Error("手机号格式错误"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: "请输入您的用户名", trigger: "blur" },
    { min: 3, max: 15, message: "长度必须在3-15个字符之间", trigger: "blur" },
  ],
  phone: [{ validator: validPhone, required: true, trigger: "blur" }],
  securityQ1: [{ required: true, message: "请设置问题1", trigger: "blur" }],
  securityA1: [{ required: true, message: "请设置密码1", trigger: "blur" }],
  securityQ2: [{ required: true, message: "请设置问题2", trigger: "blur" }],
  securityA2: [{ required: true, message: "请设置密码2", trigger: "blur" }],
  securityQ3: [{ required: true, message: "请设置问题3", trigger: "blur" }],
  securityA3: [{ required: true, message: "请设置密码3", trigger: "blur" }]
});


// 重置
const resetRuleForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  init()
}

/**
 * defineEmits emit给父组件
 */
interface EmitEvent {
  (e: "closeDialog"): void;
}
const emit = defineEmits<EmitEvent>();
const close = () => {
  emit("closeDialog");
};


const ensureUpdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      editUserApi.updateUserBasicInfo(ruleForm).then((res: any) => {
        if (res.code == 200) {
          showMessageBox('success', res.msg, 3000, false);
          loginStore.getAndSetUserInfo();
          close();
          setTimeout(() => {
            reload();
          }, 500);
        } else {
          showMessageBox('error', res.msg, 3000, false)
        }
      });
    } else {
      console.log('invalid')
    }
  })
}
</script>

<style scoped lang="scss">
</style>
